<template>
	<view class="pics">
		<scroll-view class="left" scroll-y>
			<view 
			@click = "leftClickHandle(index,item.id)"
			:class="active===index?'active':''" 
			v-for="(item,index) in cates" 
			:key="item.id">
			{{item.title}}
			</view>
		</scroll-view>
		
		<scroll-view class="right" scroll-y>
			<view class= "item" v-for="item in secondDate" :key="item.id">
				<image @click="previewImage(item.img_url)"></image>
				<image src="item.img_url"></image>
				<text>{{item.title}}</text>
			</view>
			<text v-if="secondDate.length === 0 ">暂无数据</text>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cates:[],
				active:0,
				secondDate:[],
			}
		},
		methods: {
			async getPicsCate(){
				const res = await this.$myRuquest({
					url:'/api/getimgcategory'
				})
				this.cates = res.data.message
				this.leftClickHandle(0,this.cates[0].id)
			},
			async leftClickHandle(index,id){
				this.active=index
				const res = await this.$myRuquest({
					url:'/api/getimages/'+id
				})
				this.secondDate =res.data.message
			},
			previewImage(current){
				const urls = this.secondDate.map(item=>{
					return item.img_url
				})
				uni.previewImage({
					current,
					urls
				})
				
			}
		},
		onLoad(){
			this.getPicsCate()
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.pics{
		 height: 100%;
		 display:flex;
		 .left{
			 width: 200rpx;
			 height: 100%;
			 border-right: 1px solid #eee;
			 view{
			 		height: 60px;
			 		line-height: 60px;
					color: #333;
					text-align: center;
					font-size: 30rpx;
					border-top: 1px solid #eee;
			 }
			 .active{
			 			 background: $shop-color;
			 			 color: #fff;
			 }
		 }
		 .right{
			 height: 100%;
			 width: 520rpx;
			 margin: 0 auto;
			 .item{
				 width: 520rpx;
				 height: 520rpx;
				 border-radius: 5px;
			 }
			 text{
				 font-size:30rpx ;
				 line-height: 60rpx;
			 }
		 }
		 
	}
</style>
